<template>
  <div class="p-4">
    <Card title="统计" v-bind="$attrs">
      <template #extra>
        <div style="display: flex;justify-items: center">

          <!--        v-model:value="value"-->
          <Calendar v-show="!activeDayBtn" style="width: 100%;margin-left: 15px;" :fullscreen="false"
            @panelChange="onPanelChange" valueFormat="YYYY-MM" />
          <div style="width: 100%" v-if="activeDayBtn">

          </div>
          <div v-show="activeDayBtn" style="line-height: 48px;">
            <RangePicker v-model:value="dateRangeValue" valueFormat="YYYY-MM-DD" size="small" @change="dateRangeChange">
            </RangePicker>
          </div>

          <div style="line-height: 48px;cursor: pointer;" :class="{ 'active-day': activeDayBtn }"><span
              style="padding: 8px" @click="dayClickFn">天</span></div>

        </div>

      </template>
      <!--    四张卡片-->
      <GrowCard :loading="loading" class="enter-y" :dateStr="dateObj.value" :dateType="dateObj.mode"
        :dateRangeValue="dateRangeValue" ref="myCard" />

    </Card>


    <!--    趋势图-->
    <!--    <SiteAnalysis class="!my-4 enter-y" :loading="loading" />-->

    <!--    排行榜-->
    <DynamicInfo :loading="loading" class="!my-4 enter-y" />

    <!--    饼图-->
    <div class="md:flex enter-y">
      <!--      <VisitRadar class="md:w-1/3 w-full" :loading="loading" />-->
      <!--      <VisitSource class="md:w-1/3 !md:mx-4 !md:my-0 !my-4 w-full" :loading="loading" />-->
      <!--      class="md:w-1/3 w-full"-->
      <SalesProductPie class=" w-full" :loading="loading" />
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import GrowCard from './components/GrowCard.vue';
import SiteAnalysis from './components/SiteAnalysis.vue';
import VisitSource from './components/VisitSource.vue';
import VisitRadar from './components/VisitRadar.vue';
import SalesProductPie from './components/SalesProductPie.vue';
import DynamicInfo from '../workbench/components/DynamicInfo.vue';
import { Card, Tabs, Calendar, RangePicker } from 'ant-design-vue';


const loading = ref(true);
const dateObj = ref({});
const myCard = ref();
const activeKey = ref('1');

const activeDayBtn = ref(false);
const dateRangeValue = ref([]);
function tabChange(e) {

}
function dateRangeChange(e) {
  console.log("---dateRangeChange", e);

}
function dayClickFn() {
  activeDayBtn.value = !activeDayBtn.value;
  if (!activeDayBtn.value) {
    dateRangeValue.value = [];
  }
}
function onPanelChange(value, mode) {
  let obj = { value, mode };
  dateObj.value = obj;
  console.log("---obj:", obj)
  // myCard.value.change(obj)
}

setTimeout(() => {
  loading.value = false;
}, 1500);
</script>
<style lang="less">
.ant-card-head {
  .ant-card-extra {
    width: 100%;
  }

  .ant-picker-panel {
    display: none;
  }

  .active-day {
    color: #004496;
  }

}
</style>
